import { useEffect, useState } from "react";

function Son() {
  // 渲染时开启个定时器
  useEffect(() => {
    console.log("Son组件渲染了");
    let timer = setInterval(() => {
      console.log("定时器执行了");
    }, 1000);
    // 卸载时清除定时器(组件卸载时)
    return () => {
      clearInterval(timer);
    };
  }, []);
  return <div>Son组件</div>;
}

function App() {
  const [show, setShow] = useState(true);
  return (
    <div className="App">
      Hello World!
      {show && <Son />}
      <button onClick={() => setShow(false)}>卸载Son组件</button>
    </div>
  );
}

export default App;
